<template>
  <div id="box">
    <el-row class="tac">

      <el-col :span="12"
              style="border:1px">

        <el-row style="margin-bottom:30px">
          <i class="el-icon-goods"
             style="font-size:20px">服务详情</i>
        </el-row>

        <el-row>
          <el-col :span="20">
            <div class="grid-content bg-purple">
              {{newServer.name}}
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-image :src="newServer.image"
                    style="width:85%">
            <div slot="error"
                 class="image-slot">
              <div slot="error">
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2165691866,2570924737&fm=26&gp=0.jpg"
                     width="100%">
              </div>
            </div>
          </el-image>
        </el-row>

        <el-row>
          <el-col :span="20">
            <div class="grid-content bg-purple-light">提供者： {{ newServer.provider }}</div>
          </el-col>

        </el-row>

        <el-row>

          <el-col :span="20">
            <div class="grid-content bg-purple-dark">
              ¥：{{ newServer.price }}

            </div>
          </el-col>

        </el-row>

        <el-col :span="20">
          <div class="grid-content bg-purple-light">{{newServer.content}}</div>
        </el-col>
      </el-col>

      <el-col :span="12">
        <el-row style="margin-bottom:30px">
          <i class="el-icon-shopping-cart-2"
             style="font-size:20px">订购此服务</i>
        </el-row>
        <el-form ref="form"
                 :model="form"
                 label-width="70px">

          <el-form-item label="您的姓名">
            <el-input v-model="form.customer"></el-input>
          </el-form-item>

          <el-form-item label="联系电话">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>

          <el-form-item label="详细地址">
            <el-input v-model="form.address"></el-input>
          </el-form-item>

          <el-form-item label="预约时间">
            <el-col :span="20">
              <el-date-picker type="datetime"
                              placeholder="请选择预约时间"
                              v-model="form.time"
                              style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="付款方式">
            <el-select v-model="form.paytype"
                       placeholder="请选择付款方式">
              <el-option label="支付宝"
                         value="1"></el-option>
              <el-option label="当面付"
                         value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="订单备注">
            <el-input type="textarea"
                      v-model="form.content"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">创建订单</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>

        </el-form>

      </el-col>
    </el-row>

    <div style="width:40%">

    </div>

  </div>
</template>
<script>
import axios from 'axios'
import http from '../../../axios_config'
export default {
  props: {
    server: {},
  },
  //当组件创建完毕后自动调用此方法
  created () {
    this.newServer = this.server;
    console.log(this.newServer);
  },
  data () {
    return {
      newServer: {},
      form: {
        customer: '',
        phone: '',
        address: '',
        time: '',
        paytype: '',
        content: '',
      },
    }
  },
  methods: {
    //取消按钮方法
    cancel () {
      //通知父组件关闭对话框
      this.$emit("closedialog")
    },

    //提交订单按钮方法
    onSubmit () {
      console.log('提交订单!');
      let order = {
        sid: this.newServer.id,
        customer: this.form.customer,
        phone: this.form.phone,
        address: this.form.address,
        time: this.form.time,
        information: this.form.content,
        paytype: this.form.paytype,
        price: this.newServer.price,
        result: 0,
      }
      console.log(order);
      http.post("http://192.168.11.18:8080/serverOrder/insertServerOrder", order).then(res => {
        //success后执行 res是返回的结果 
        console.log(res);
        if (res.data == true) {
          this.$message({
            showClose: true,
            message: '订单提交成功，请前往个人中心查看进度',
            type: 'success'
          });
          //通知父组件关闭对话框
          this.$emit("closedialog")
        } else {
          this.$message({
            showClose: true,
            message: '订单提交失败，请稍后再试',
            type: 'warning'
          });
        }
      });
    },

  }
}

</script>
<style scoped>
el-row {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.el-col {
  border-radius: 25px;
}
/* .bg-purple-dark {
  background: #99a9bf;
} */

/* .bg-purple-light {
  background: #e5e9f2;
} */
.grid-content {
  border-radius: 25px;
  min-height: 36px;
  text-align: center;
  padding-top: 15px;
  margin: 10px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.bg-purple {
  background: #d3dce6;
}
</style>